<template>
  <div class="layout">
    <Layout class="layout">
        <Sider class="leftMenu" hide-trigger>
          <left-menu></left-menu>
        </Sider>
        <Layout>
            <Header class="header">
              <nav-header></nav-header>
            </Header>
            <Content class="el-content"><router-view/></Content>
        </Layout>
    </Layout>
    
  </div>
</template>

<script>
import LeftMenu from '@commons/LeftMenu';
import NavHeader from '@commons/Nav';

export default {
  name: 'Main',
  data() {
    return {

    }
  },
  components: {
    LeftMenu,
    NavHeader
  }
}
</script>

<style lang="less">
  .layout {
    height: 100%;
  }
  .leftMenu {
    text-align: center;
    background-color: #ffffff;
    color: @black_333_color; 
  }
  .header {
    padding: 0 10px;
    height: @navHeight;
    line-height: @navHeight;
    color: @black_333_color;
    background-color: #ffffff;
    border-bottom: 1px solid #EEEEEE;
  }
  .el-content {
    position: relative;
    background-color: #F0F0F0;
    padding: 0;
    overflow-y: scroll;
  }
</style>
